<template>
	<Layout class="layout">
		<Header class="header">
			<div style="flex:1;height: 100%;">
				<div class="logo"></div>
				<div class="nav">网站标题，公司名称</div>
			</div>
			<Menu mode="horizontal" theme="dark" @on-select="selectMenu">
				<Submenu name="tenant-manage">
					<template slot="title">
						<Icon type="ios-person" />
						<span>个人中心</span>
					</template>
					<MenuGroup title="账户">
						<MenuItem name="change-pass">修改密码</MenuItem>
						<MenuItem name="logout">注销</MenuItem>
					</MenuGroup>
				</Submenu>
			</Menu>
		</Header>
		<Layout class="content">
			<Sider class="sider" collapsible :collapsed-width="0" v-model="isCollapsed">
				<Menu :active-name="menuName" width="auto">
					<MenuItem name="template_content" :to="{name:'template_content'}">
						<img src="@/assets/icon/template.png" alt="">
						<span>模板页面</span>
					</MenuItem>
					<MenuItem name="" style="height: 80px;"></MenuItem>
				</Menu>
			</Sider>
			<Content class="main">
				<keep-alive>
					<router-view></router-view>
				</keep-alive>
			</Content>
		</Layout>
		<!-- 修改密码对话框 -->
		<Modal v-model="passwordModal" title="修改密码" footer-hide>
			<Form ref="passForm" :model="passInfo" :rules="passRules" :label-width="80">
				<FormItem label="原密码"><Input type="password" v-model="passInfo.originPassword" placeholder="请输入原密码" /></FormItem>
				<FormItem prop="password" label="新密码"><Input type="password" password v-model="passInfo.password" placeholder="请输入新的密码" /></FormItem>
				<FormItem><Button type="primary" @click="savePassword">更新</Button></FormItem>
			</Form>
		</Modal>
	</Layout>
</template>

<script>
export default {
	components: {},
	data() {
		const validateConfirmPass = (rule, value, callback) => {
			if (!value) {
				callback(new Error('必填'));
			} else {
				if (this.passInfo.password !== this.passInfo.confirmPassword) {
					callback(new Error('两次输入不一致'));
				} else {
					callback();
				}
			}
		};
		return {
			menuName: '', // 选中的菜单名称
			isCollapsed: false, // 左侧菜单是否收起
			passwordModal: false,
			changeCompanyModal: false,
			passInfo: {
				userIds: [], // 用户ID，为空修改当前用户
				originPassword: '',
				password: '',
				reset: false // 是否重置
			}, // 密码修改
			passRules: {
				originPassword: [{ required: true, message: '必填' }],
				password: [{ required: true, message: '必填' }],
				confirmPassword: [{ validator: validateConfirmPass }]
			}
		};
	},
	computed: {
		menuItemClass: function() {
			return this.isCollapsed ? 'collapsed-menu' : 'menu-item';
		}
	},
	watch: {},
	created: function() {},
	mounted: function() {
		this.menuName = this.$route.name || '';
	},
	methods: {
		// 个人中心菜单
		selectMenu: function(name) {
			if (name == 'logout') {
				this.logout();
			} else if (name == 'change-pass') {
				this.passwordModal = true;
			}
		},
		logout: function() {
			this.$Modal.confirm({
				title: '确认注销？',
				content: '',
				onOk: () => {
					this.$request.get(
						'/admin/sys/logout',
						{},
						res => {
							this.$router.replace({ name: 'login' });
						},
						true,
						true
					);
				}
			});
		},
		// 保存公司
		saveCompany: function() {
			this.$request.post(
				'/admin/sys/org/changeTopOrg',
				this.companyInfo,
				res => {
					this.changeCompanyModal = false;
				},
				true,
				true
			);
		},
		// 修改密码
		savePassword: function() {
			this.$refs['passForm'].validate(valid => {
				if (valid) {
					this.$request.post(
						'/admin/sys/user/changeUserPassword',
						this.passInfo,
						res => {
							this.passwordModal = false;
						},
						true,
						true
					);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.layout {
	height: 100vh;
	overflow: hidden;

	.header {
		display: flex;
		height: auto;
		background-color: #00557f;
	}

	.content {
		flex: 1;
		height: 100%;
		width: 100%;
		overflow: hidden;

		.sider {
			background-color: #ffffff;
			height: 100%;
		}

		.main {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	}

	.logo {
		width: 40px;
		height: 40px;
		background: url(../../assets/logo.png);
		background-size: 100% 100%;
		border-radius: 3px;
		float: left;
		position: relative;
		top: 12px;
		left: 50px;
	}

	.nav {
		margin-left: 120px;
		color: white;
		font-size: 18px;
	}
}
.ivu-menu-item, .ivu-menu-submenu-title {
	display: flex;
	align-items: center;
	img {
		width: 20px;
		height: 20px;
		margin-right: 6px;
	}
	span {
		line-height: 20px;
	}
}
.ivu-layout-header {
	padding: 0;
}
.ivu-menu-dark {
	background-color: transparent;
}
.ivu-menu-submenu-title {
	color: white;
}
.menu-item span {
	display: inline-block;
	overflow: hidden;
	width: auto;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
	transition: width 0.2s ease 0.2s;
}
.menu-item img {
	transform: scale(1);
	transition: font-size 0.2s ease, transform 0.2s ease;
	vertical-align: middle;
	font-size: 16px;
}
.collapsed-menu span {
	width: 0;
	display: none;
	transition: width 0.2s ease;
}
.collapsed-menu img {
	transform: scale(1.5);
	transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
	vertical-align: middle;
	font-size: 22px;
}
</style>

<style>
.ivu-layout-sider-trigger {
	background-color: #ffffff !important;
	color: #00557f !important;
}
.ivu-layout-sider-children {
	overflow-y: auto;
}
.ivu-layout-sider-zero-width-trigger {
	top: 200px !important;
	z-index: 100;
}
</style>
